<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'销售额分析',liner:true}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="nostrongtext" @click="pop_show=true">筛选</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding">
			<view class="strongtext">
				<text class="titletext textliner">数据分析</text>
			</view>
			<view class="ffffff mainpadding_top">
				<!-- <view class="flexbetween">
					<view class="flexleft">
						<view :class="datecurrent==1?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchDate(1)">年</view>
						<view :class="datecurrent==2?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchDate(2)">月</view>
						<view :class="datecurrent==3?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchDate(3)">日</view>
					</view>
					<view class="flexleft selecttime_box radius" @click="shows = true">
						<view class="selecttime" style="margin-right: 20rpx;"></view>
						<view class="selecttime_text">{{startime==""?"自定义时间":startime+"-"+endtime}}</view>
					</view>
				</view> -->
				<view class="flexleft">
					<view class="charts-box" style="flex: 2;">
						<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
					</view>
					<view class=" flexcolumn" style="flex: 1.5;">
						<view class="bigtext">上{{RetnWF2()}}销售总额</view>
						<view class="maincolor_text margin_top">{{allmsg.prev_saleprice}}</view>
						<view class="upimage2 margin_top"
							v-show="allmsg.today_saleprice>=allmsg.prev_saleprice"></view>
						<view class="downimage2 margin_top"
							v-show="allmsg.today_saleprice<allmsg.prev_saleprice"></view>
						<view class="strongtext margin_top">
							<text>同比{{allmsg.today_saleprice>=allmsg.prev_saleprice?'增长':'减少'}}</text>
							<text
								class="uptext">{{allmsg.tb_cz_price}}</text>
							<text>元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="strongtext margin_top">
				<text class="titletext textliner">详细数据</text>
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="flexcenter">
					<view class="tablehead flex2 flexcenter">日期</view>
					<view class="tablehead flex2 flexcenter">销售额</view>
					<view class="tablehead flex2 flexcenter">退款</view>
					<view class="tablehead flex2 flexcenter">净额</view>
				</view>
				<view class="flexcenter margin_top">
					<view class="strongtext flex2 flexcenter">今日</view>
					<view class="strongtext flex2 flexcenter">{{allmsg.today_saleprice}}</view>
					<view class="strongtext flex2 flexcenter redtext">{{allmsg.today_salethprice}}</view>
					<view class="strongtext flex2 flexcenter" style="color: #00B855;">{{allmsg.today_xc_price}}</view>
				</view>
				<view class="flexcenter margin_top">
					<view class="strongtext flex2 flexcenter">昨日</view>
					<view class="strongtext flex2 flexcenter">{{allmsg.zr_saleprice}}</view>
					<view class="strongtext flex2 flexcenter redtext">{{allmsg.zr_salethprice}}</view>
					<view class="strongtext flex2 flexcenter" style="color: #00B855;">{{allmsg.zr_xc_price}}
					</view>
				</view>
				<view class="flexcenter margin_top">
					<view class="strongtext flex2 flexcenter">前天</view>
					<view class="strongtext flex2 flexcenter">{{allmsg.qr_saleprice}}</view>
					<view class="strongtext flex2 flexcenter redtext">{{allmsg.qr_salethprice}}</view>
					<view class="strongtext flex2 flexcenter" style="color: #00B855;">{{allmsg.qr_xc_price}}
					</view>
				</view>
				<view class="flexcenter margin_top">
					<view class="strongtext flex2 flexcenter">上周</view>
					<view class="strongtext flex2 flexcenter">{{allmsg.sz_saleprice}}</view>
					<view class="strongtext flex2 flexcenter redtext">{{allmsg.sz_salethprice}}</view>
					<view class="strongtext flex2 flexcenter" style="color: #00B855;">{{allmsg.sz_xc_price}}
					</view>
				</view>
				<view class="flexcenter margin_top">
					<view class="strongtext flex2 flexcenter">本周</view>
					<view class="strongtext flex2 flexcenter">{{allmsg.bz_saleprice}}</view>
					<view class="strongtext flex2 flexcenter redtext">{{allmsg.bz_salethprice}}</view>
					<view class="strongtext flex2 flexcenter" style="color: #00B855;">{{allmsg.bz_xc_price}}
					</view>
				</view>
				<view class="flexcenter margin_top">
					<view class="strongtext flex2 flexcenter">上月</view>
					<view class="strongtext flex2 flexcenter">{{allmsg.sy_saleprice}}</view>
					<view class="strongtext flex2 flexcenter redtext">{{allmsg.sy_salethprice}}</view>
					<view class="strongtext flex2 flexcenter" style="color: #00B855;">{{allmsg.sy_xc_price}}
					</view>
				</view>
				<view class="flexcenter margin_top">
					<view class="strongtext flex2 flexcenter">本月</view>
					<view class="strongtext flex2 flexcenter">{{allmsg.by_saleprice}}</view>
					<view class="strongtext flex2 flexcenter redtext">{{allmsg.by_salethprice}}</view>
					<view class="strongtext flex2 flexcenter" style="color: #00B855;">{{allmsg.by_xc_price}}
					</view>
				</view>
				<view class="flexcenter margin_top">
					<view class="strongtext flex2 flexcenter">上年</view>
					<view class="strongtext flex2 flexcenter">{{allmsg.sn_saleprice}}</view>
					<view class="strongtext flex2 flexcenter redtext">{{allmsg.sn_salethprice}}</view>
					<view class="strongtext flex2 flexcenter" style="color: #00B855;">{{allmsg.sn_xc_price}}
					</view>
				</view>
				<view class="flexcenter margin_top">
					<view class="strongtext flex2 flexcenter">今年</view>
					<view class="strongtext flex2 flexcenter">{{allmsg.jn_saleprice}}</view>
					<view class="strongtext flex2 flexcenter redtext">{{allmsg.jn_salethprice}}</view>
					<view class="strongtext flex2 flexcenter" style="color: #00B855;">{{allmsg.jn_xc_price}}
					</view>
				</view>

			</view>
		</view>
		<u-popup round="20" :show="pop_show" @close="pop_show=false">
			<view class="mainpadding_top ffffff">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="itemscreen flexleft margin_top" @click="selectRole('/pages/workbench/jiben/yuangongda?type=2')">
					<view class="strongtext minwidth">员工</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择员工" v-model="staff_name">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="itemscreen flexleft margin_top" @click="selectRole('/pages/workbench/jiben/shangpinda?type=1')">
					<view class="strongtext minwidth">商品</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择商品" v-model="goods_name">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="itemscreen flexleft margin_top" @click="spFenLeiShow=true">
					<view class="strongtext minwidth">商品分类</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择商品分类" v-model="spFenLeiText">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="sureBtn">确认</view>
				</view>
			</view>
		</u-popup>

		<!--日期 -->
		<!-- 开始时间 -->
		<u-datetime-picker :show="shows" v-model="value1" title="开始时间" mode="date" @confirm="confirmstart"
			@cancel="shows=false"></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :show="showss" v-model="value2" :minDate="mindate" title="结束时间" mode="date" @confirm="confirmend"
			@cancel="showss=false"></u-datetime-picker>
		<selectSPFenLei :message="{spFenLeiShow:spFenLeiShow}" @spFenLeiSure="spFenLeiSure"></selectSPFenLei>
		<!-- 选择商品分类 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mindate: "", //最小时间
				// 自定义时间
				startime: this.jinnian(),
				endtime: this.riqi(0),
				datecurrent: 1,
				pop_show: false,
				chartData: {},
				allmsg: {},

				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc", '#ffa126'
					],
					padding: [0, 0, 0, 0],
					dataLabel: true,
					legend: { //图例配置
						show: false, //是否显示图例配置
						fontColor: "#fff", //字体颜色
						position: "top",
						float: "right",
					},
					title: {
						name: "1020.97",
						fontSize: 10,
						color: "#0BBDCB"
					},
					subtitle: {
						name: "今日销售净额",
						fontSize: 8,
						color: "#333"
					},
					extra: {
						ring: {
							labelWidth: 1,
							ringWidth: 15,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				pageShow:false,
				staff_id: "", //业务员
				staff_name: "",
				goods_name: "", //商品
				goods_id: "",
				// 商品分类
				spFenLeiShow: false,
				spFenLeiText: "",
				category_id: "", //商品分类id
			}
		},

		onLoad() {
			this.init();
		},
		onShow() {
			let that = this
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				that.staff_id = data.id
				that.staff_name = data.name
				return false
			})
			uni.$off('spSelectFn');
			uni.$on('spSelectFn', (data) => {
				that.goods_id = data.id
				that.goods_name = data.name
				return false
			})
		},
		methods: {
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			spPinPaiSure(e) { //商品品牌
				if (e) {
					this.spPinPaiText = e.value[0].name
					this.goods_brand_id = e.value[0].id
				}
				this.spPinPaiShow = false
			},
			spFenLeiSure(e) { //商品分类
				if (e) {
					this.spFenLeiText = e.spFenLeiText
					this.category_id = e.category_id
				}
				this.spFenLeiShow = false
			},
			// 重置
			resetbtn() {
				this.staff_id=""//业务员
				this.staff_name=""
				this.goods_name=""//商品
				this.goods_id=""
				// 商品分类
				this.spFenLeiText= ""
				this.category_id= ""
				this.init()
				this.pop_show = false
			},
			// 确定
			sureBtn() {
				this.pop_show = false
				this.init();
			},
			RetnWF2() { //JS判断的if elseif方法
				let wstr = "";
				let date = new Date();
				let day = date.getDay();
				if (day == 0) {
					wstr = "周日";
				} else if (day == 1) {
					wstr = "周一";
				} else if (day == 2) {
					wstr = "周二";
				} else if (day == 3) {
					wstr = "周三";
				} else if (day == 4) {
					wstr = "周四";
				} else if (day == 5) {
					wstr = "周五";
				} else if (day == 6) {
					wstr = "周六";
				}
				return wstr;
			},
			cumput(v1, v2) {
				let num1 = Number(v1)
				let num2 = Number(v2)
				if (num1 < num2) {
					return num1 - num2
				} else if (num1 > num2) {
					return num2 - num1
				} else {
					return num1
				}
			},
			init() {
				httpRequest.request('/dhtapi/goods/salePriceRang', 'POST', {
					staff_id: this.staff_id, //品牌
					category_id: this.category_id, //类别
					goods_id: this.goods_id, //商品
				}).then(res => {
					this.allmsg = res.data
					let msg = {
						series: [{
							data: [{
								name: "今日销售净额",
								value: 0,
								labelShow: false
							}, {
								name: "上周今日销售净额",
								value: 10,
								labelShow: false
							}, ]
						}]
					};
					let num1 = Number(this.allmsg.today_saleprice)
					let num2 = Number(this.allmsg.prev_saleprice)
					msg.series[0].data[0].value = num1
					msg.series[0].data[1].value = num2
					this.opts.title.name = this.allmsg.today_xc_price.toString()
					this.chartData = JSON.parse(JSON.stringify(msg));
					this.pageShow = true
				})
			},
			jumpurl() {
				uni.navigateTo({
					url: '/pages/workbench/jingying/xsxzscreen?msg=' + 1
				})
			},
			//日期选择
			confirmstart(e) {
				this.shows = false
				this.showss = true
				this.mindate = e.value
				this.startime = httpRequest.returnDate(e.value)
				// console.log(this.starttime, "开始时间确定")
			},
			confirmend(e) {
				this.showss = false
				this.endtime = httpRequest.returnDate(e.value)
				// console.log(this.endtime,"结束时间")
				this.init()
			},
			//日期选择
			switchDate(value) {
				this.datecurrent = value
				if (value == 1) {
					// 获取今年第一天和今天
					this.startime = this.jinnian()
					this.endtime = this.riqi(0);
				} else if (value == 2) {
					// 获取本月第一天和今天
					this.startime = this.benyue();
					this.endtime = this.riqi(0);
				} else {
					// 获取今日
					this.startime = this.riqi(0);
					this.endtime = this.riqi(0);
				}
				this.init()
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			// 今年第一天
			jinnian() {
				let date1 = new Date();
				let year1 = date1.getFullYear();
				let firstMonth = year1 + '-' + '01' + '-' + '01';
				return firstMonth
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select {
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #0BBDCB;
		background-color: #0BBDCB;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #fff;
	}

	.noselect {
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #999999;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}

	// 筛选样式开始
	.surebtn {
		width: 45%;
	}

	.reset {
		background: #ebb563;
	}

	.minwidth {
		min-width: 130rpx;
	}

	.rightscreen {
		width: 100%;
	}

	.itemscreen {
		padding-bottom: 20rpx;
	}

	// 筛选样式结束
	// 销售额分析
	.charts-box {
		width: 50%;
		height: 300rpx;
	}

	.maincolor_text {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	.uptext {
		color: #00b855;
	}

	.downtext {
		color: #fb6363;
	}

	// 底部表格开始
	.tablehead {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.flex2 {
		flex: 2;
	}
</style>